<template>
	<view class="no-login-order-list">
		<view class="top-image">
			<image :src="`${constInfo.srcConst}/sxzz/list_ill_not.png`" style="width: 328rpx" mode="widthFix"></image>
			<view class="top-image-title">请登录查看订单</view>
		</view>
		<view class="uni-margin-wrap">
			<swiper style="height: 360rpx" class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="2500" :duration="2500">
				<swiper-item v-for="item in swiper.image" :key="item.imageUrl" @click="handleBanner(item)">
					<view class="image-con">
						<image class="banner-image" :src="`${constInfo.srcConst}${item.imageUrl}`" style="width: 700rpx" mode="widthFix"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { storeToRefs } from 'pinia';
import initApi from '@/apis/init.js';
import { constStore } from '@/store/const.js';
import { useUserStore } from '@/store/user.js';
//引入防抖函数
const { constInfo } = constStore();
const { userInfo } = useUserStore();

const swiper = reactive({
	image: [
		{
			imageUrl: '/sxzz/hht-5.png'
		},
		{
			imageUrl: '/sxzz/nangua-5.png'
		},
		{
			imageUrl: '/sxzz/youku-5.png'
		}
	]
});

const handleBanner = (item) => {
	console.log(item);
};
</script>

<style lang="scss" scoped>
.uni-margin-wrap {
	margin-top: 200rpx;

	.image-con {
		height: 400rpx;
		text-align: center;
		border-radius: 40rpx ;
		.banner-image {
			border-radius: 40rpx ;
		}
	}
}
.no-login-order-list {
	.top-image {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 124rpx;
	}
	.top-image-title {
		font-weight: 300;
		font-size: 24rpx;
		color: #8b8b8b;
		line-height: 28rpx;
	}
}
</style>
